﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Touch4.aspx.cs" Inherits="Touchscreen.Touch4" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="App_Themes/Stylesheet1.css" rel="stylesheet" />
</head>
<body>
<%
    Touchscreen.FilmManager filmManager = new Touchscreen.FilmManager();
    Touchscreen.Film f;
    f = filmManager.GetFilmByFilmName((Request.QueryString["FilmName"]));

    LabelTitle.Text = f.title;
    LabelTime.Text = "Start tijd: " + f.startTime.ToShortTimeString();
    LabelRoom.Text = "Zaal: " + f.room.ToString();
    ImagePreview.ImageUrl = ImageFolder + f.image;
    LabelLanguage.Text = "Taal: ";
    ImageLanguage.ImageUrl = FlagsFolder + f.language + ".gif";  
%>
    <form id="form1" runat="server">
    <div class="FullScreen">
        <div class="ButtonNextPrevious">
            <asp:Button ID="ButtonPrevious" CssClass="FloatLeft ButtonWizard" runat="server" 
            Text="Terug" PostBackUrl="Touch1.aspx" Font-Size="Large" Height="100%" 
            Width="49%" />
        <asp:Button ID="ButtonNext" runat="server" Font-Bold="True" Font-Size="Large" 
            Height="100%" Text="Betalen" Width="49%" PostBackUrl="Touch4.aspx" />
        </div>

        <div class="FilmOverview">
            <div class="FilmTitle">
                <asp:Label ID="LabelTitle" CssClass="FilmTilteText" runat="server" Text="Title"></asp:Label>
            </div>
            <div class="FilmTimeAndPlace">
                <asp:Label ID="LabelTime" CssClass="FloatLeft" runat="server" Text="Start tijd: tijd"></asp:Label>
                <asp:Label ID="LabelRoom" CssClass="FloatRight" runat="server" Text="Zaal: x"></asp:Label>
            </div>
            <div class="FilmPreviewImage">
                <asp:Image ID="ImagePreview" runat="server" 
                    ImageUrl="~/App_Themes/Images/blackswan3.jpg" Height="100%" 
                    Width="100%" />
            </div>
            <div class="FilmLanguage">
                <asp:Label ID="LabelLanguage" CssClass="FloatLeft" runat="server" Text="Taal:"></asp:Label>
                <asp:Image ID="ImageLanguage" runat="server" 
                    ImageUrl="~/App_Themes/Images/Flags/EN.gif" CssClass="Flag" />
            </div>    
            <div class="FilmParentGuide">
                <asp:Image ID="ImageParentGuide" runat="server" Height="24px" 
                    ImageUrl="~/App_Themes/Images/3d.png" Width="24px" />
            </div>
            <div class="ButtonCancelPlaceHolder">
            <asp:Button ID="ButtonCancel" runat="server" Font-Bold="True" Font-Size="Large" 
                        ForeColor="Black" Height="100%" Text="Annuleren" 
                        Width="100%" PostBackUrl="Touch1.aspx" />
            </div>
        </div>
        <div class="StapContent">
            <table class="StapContentText">
        <tr>
            <td align="center">
                &nbsp;
                &nbsp;
                &nbsp;
                Stap 4</td>
        </tr>
        <tr>
            <td align="center">
                Het totaalbedrag is: [bedrag]. U kunt beginnen met pinnen.
            </td>
        </tr>
        <tr>
            <td align="center">
                <input maxlength="4" id="pincode" type="password" value="" style="height: 40px; font-size: 30px; margin: 20px 0px 10px -185px; width: 300px; text-align: center; padding-top: 5px;" READONLY="READONLY"/>
            </td>
        </tr>
        <tr>
            <td align="center">
                <table style="width: 400px; margin-left: 30px">
                    <tr>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='1';}" type="button" value="1" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='2';}" type="button" value="2" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='3';}" type="button" value="3" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="document.getElementById('pincode').value='';" type="button" value="Stoppen" style="width: 200px; height: 80px; margin-left: 10px; font-size: 30px; font-weight: bold; color: #CC0000;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='4';}" type="button" value="4" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='5';}" type="button" value="5" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='6';}" type="button" value="6" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="document.getElementById('pincode').value=(document.getElementById('pincode').value.slice(0,-1))" type="button" value="Corrigeren" style="width: 200px; height: 80px; margin-left: 10px; font-size: 30px; font-weight: bold; color: #FF6600;" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='7';}" type="button" value="7" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='8';}" type="button" value="8" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='9';}" type="button" value="9" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td>
                            <input onclick="" type="button" value="Enter" style="width: 200px; height: 80px; margin-left: 10px; font-size: 30px; font-weight: bold; color: #006600;"/>
                        </td>
                    </tr>
                    <tr>
                        <td>&nbsp;</td>
                        <td>
                            <input onclick="if (document.getElementById('pincode').value.length<4){document.getElementById('pincode').value+='0';}" type="button" value="0" style="width: 100px; height: 80px; font-size: 30px;" />
                        </td>
                        <td align="center" colspan="2">&nbsp;</td>
                    </tr> 
                </table>
            </td>
        </tr>
    </table>      
        </div>
    </div>
    </form>
</body>
</html>
